<template>
  <div class="z-library h-full flex flex-col ">
    <el-tabs v-model="tab"
             type="card"
             class="flex-1 flex flex-col"
             size="mini">
      <el-tab-pane label="Global"
                   name="global">
        <el-form label-position="top">
          <el-form-item label="Width">
            <el-input-number controls-position="right"
                             size="mini"
                             v-model="setting.width">
            </el-input-number>
          </el-form-item>
          <el-form-item label="Height">
            <el-input-number controls-position="right"
                             size="mini"
                             v-model="setting.height">
            </el-input-number>
          </el-form-item>
          <el-form-item label="Field"
                        v-if="setting.columns">
            <el-select style="width:100%"
                       @change="handleChangeField"
                       v-model="setting.field">
              <el-option v-for="(item,index) in setting.columns"
                         :key="index"
                         :label="item.name"
                         :value="item.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Background Image">
            <el-upload :http-request="handleUpload"
                       action=""
                       :show-file-list="false"
                       class="
                z-library-upload
                cursor-pointer
                relative
                overflow-hidden
                flex
                items-center
                justify-center
              ">
              <img v-if="setting.bg"
                   :src="setting.bg"
                   class="z-library-upload--img" />
              <i v-else
                 class="el-icon-plus z-library-upload--icon"></i>
            </el-upload>
          </el-form-item>

          <!-- <el-form-item label="Font Size">
            <el-input-number v-model="setting.fontSize"
                             controls-position="right"
                             size="mini"></el-input-number>
          </el-form-item> -->
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="Library"
                   name="library">
        <div class="
            z-library-component
            flex flex-col
            justify-center
            items-center
            cursor-pointer
          "
             v-for="(value, key) in library"
             :key="key"
             :component="key"
             :draggable="setting.type === 'widget'"
             @dragstart="dragstart">
          <div class="
              z-library-component__wrapper
              flex
              items-center
              justify-center
            ">
            <ZIcon icon="el-icon-help"
                   :size="36"
                   color="#5271ed" />
          </div>
          <div class="z-library-component-name">{{ value }}</div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { library } from './elements'
import ZIcon from '@/components/storybook/z-icon'
import { omit, get } from 'lodash'
import useBlob from '@/components/storybook/hooks/useBlob'
import Emitter from '@/mixins/emitter'

export default {
  name: 'JuggleSetting',
  mixins: [Emitter],
  props: {
    dataInfo: {
      type: Object,
      default: () => ({})
    },
    fieldsList: {
    }
  },
  components: {
    ZIcon
  },
  data () {
    return {
      library,
      tab: 'global'
    }
  },
  computed: {
    setting: {
      get () {
        return this.dataInfo.gadgetSetting
      },
      set (val) {
        this.dispatch('QueryModel', 'event:setting', val)
      }
    }
  },
  watch: {
    fieldsList: {
      handler (val) {
        this.$set(this.setting, 'columns', val)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    dragstart (e) {
      const dataTransfer = e.dataTransfer
      const target = e.target
      const component = target.getAttribute('component')
      dataTransfer.setData('component', component)
    },
    reset () {

    },
    getData () {
      return omit(this.setting, 'source')
    },
    handleChangeField (val) {
      if (this.setting.sources.length) {
        const sources = this.setting.sources.map(i => {
          const { props, ...rest } = i
          return {
            ...rest,
            props: {
              ...props,
              field: val
            }
          }
        })
        this.$set(this.setting, 'sources', sources)
      }
      if (this.setting.source) {
        const { props, ...rest } = this.setting.source
        const source = {
          ...rest,
          props: {
            ...props,
            field: val
          }
        }
        this.$set(this.setting, 'source', source)
      }
    },
    async handleUpload (data) {
      try {
        const file = await useBlob(data.file)

        const paramsUpload = {
          file,
          path: 'apps',
          bucket: 'widget'
        }
        const { postUploadImg } = this.$interface.system
        const { data: response } = await postUploadImg(paramsUpload)
        if (response.code !== 0) {
          throw response.msg
        }
        this.$set(this.setting, 'bg', get(response, 'data.src'))
      } catch (error) {
      } finally {
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.z-library {
  .el-tabs {
    ::v-deep .el-tabs__content {
      flex: 1;
      overflow: auto;
      #pane-library {
        display: flex;
        flex-wrap: wrap;
      }
    }
  }
  .el-form-item {
    ::v-deep .el-form-item__label {
      line-height: 14px;
    }
  }
  &-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    width: 80px;
    height: 80px;
    &--img {
      display: block;
    }
    &--icon {
      font-size: 28px;
      color: #8c939d;
    }
    &:hover {
      border-color: #409eff;
    }
  }
  &-component {
    &__wrapper {
      width: 68px;
      height: 68px;
      background-color: #f7f8fa;
    }
    &-name {
      text-align: center;
      line-height: 20px;
      height: 20px;
      font-size: 14px;
    }
  }
}
</style>
